import { View, Image, Text, ScrollView, RichText } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import './index.less';
import actions from '../../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../../selectors';
import * as T from '../../types';
import 'taro-ui/dist/style/components/modal.scss';
import { IPLAND_OSS_HOST } from '../../../constant';
import { OSS_BASE_PATH_PREFIX } from '../../constant';
import CountDown from '@/pages/common/count-down';
import moment from 'dayjs';

interface INaviProps {
  isOpened: boolean;
  onCancel: Function;
}
type IToolsBoxProps = T.IProps & INaviProps;

//@ts-ignore
@connect<Partial<IToolsBoxProps>, T.IToolsBoxState>(store2Props, actions)
// export default class RankModal extends Component<INaviProps, any> {
export default class RankModal extends Component<Partial<IToolsBoxProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  getRankBox(listData = []) {
    let toolsView = [];
    listData.map((item, index) => {
      if (index == 0) {
        item.color = '#EE4B22'
        item.img = `${IPLAND_OSS_HOST}home/number1.png`;
        item.background = 'linear-gradient(135deg, #FCF0B3 0%, #FFFBE6 100%)';
      }
      if (index == 1) {
        item.color = '#EE2277';
        item.img = `${IPLAND_OSS_HOST}home/number2.png`;
        item.background = 'linear-gradient(136deg, #FFA5D9 0%, #FFE4E8 100%)';
      }
      if (index == 2) {
        item.color = '#2258EC';
        item.img = `${IPLAND_OSS_HOST}home/number3.png`;
        item.background = 'linear-gradient(136deg, #AAFFFF 0%, #EEFEFF 100%)';
      }
      if (index > 2) {
        item.color = '#DB00A9';
        item.img = '';
        item.background = 'linear-gradient(136deg, #FFE9F2 0%, #FFF0F7 100%)';
      }
      toolsView.push(
        <View
          className="cell"
          style={{ background: item.background }}
          onClick={() => { }}
        >
          <View className="info">
            {index < 3 ?
              <Image
                className="rankImg"
                src={item.img}
                mode="heightFix" />
              : <Text className="number">{index + 1}</Text>
            }
            <Image
              className="avatar"
              src={item.headImg || `${IPLAND_OSS_HOST}gameBase/uesr_pic.png`}
              mode="heightFix" />
            <Text className="title" style={{ color: item.color }}>{item.nickName || '我是第' + (index + 1) + '名'}</Text>
          </View>
          <View className="right">
            <Text className="point" style={{ color: item.color }}>{item.magicValue}</Text>
          </View>
        </View>,
      );
    });
    return toolsView;
  }

  getRewards(listData) {
    let toolsView = [];
    listData.map((item, index) => {
      toolsView.push(
        <View>
          <Text className={index % 2 == 0 ? 'txt' : 'txt colorback'}>
            第{listData[index].min}~{listData[index].max}名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;奖励魔力豆{listData[index].prizeDTO.magicCoin}颗
          </Text>
        </View>
      );
    });
    return toolsView;
  }

  render() {
    let {
      isOpened,
      main: { rankData, leaderboardRewards },
      actions,
    } = this.props;
    let myData = rankData && rankData.length > 0 ? rankData[0] : null;
    var newArr = rankData?.filter(function (item, index) {
      return index !== 0;
    });
    return (
      isOpened ? <View className="RankContainer">
        <View className="rank">
          <View className="top">
            <Text className="name">乐园魔力值排行榜</Text>
            <Image
              className="close"
              src={`${IPLAND_OSS_HOST}home/close.png`}
              onClick={() =>
                this.props.onCancel()
              }>
            </Image>
          </View>
          {rankData.length > 0 &&
            <View>
              {myData && <View className="me">
                <View className="info">
                  <Text className="rewards">{myData.ranking == -1 ? '未上榜' : '第' + myData.ranking + '名'}</Text>
                  <Image
                    className="avatar"
                    src={myData.headImg || `${IPLAND_OSS_HOST}gameBase/uesr_pic.png`} />
                  <View>
                    <Text className="name">{myData.nickName || '我自己'}</Text>
                    <Text className="name">{myData.magicValue}</Text>
                  </View>
                </View>
                {/* <Text className="time">倒计时结束：1天 23：14：32</Text> */}
                {leaderboardRewards && leaderboardRewards.endTime &&
                  <View className='timeBg'>
                    <Text className="left">倒计时结束：</Text>
                    <CountDown
                      overHandler={() => {
                      }}
                      visibleSecond={true}
                      showTimeDays={true}
                      timeStyle={{ color: '#999', margin: 0 }}
                      endTime={leaderboardRewards && leaderboardRewards.endTime}
                      timeOffset={moment(leaderboardRewards && leaderboardRewards.endTime)
                        .diff(moment(), 's')
                        .toFixed(0)}
                    />
                  </View>
                }
              </View>
              }
              <ScrollView className="scroll" scrollY>
                <View>
                  {this.getRankBox(newArr)}
                </View>
              </ScrollView>
              <View className="prize">
                <Text className="title">本期奖品</Text>
                <View className="content">
                  <ScrollView className="rewards" scrollY>
                    {/* <Text className='rewardsContext'>{leaderboardRewards && leaderboardRewards.description}</Text> */}
                    <RichText className='rewardsContext' nodes={leaderboardRewards && leaderboardRewards.description} space="nbsp"></RichText>
                  </ScrollView>
                  <Text className="clear">本榜单积分将于每月一日清空</Text>
                </View>
              </View>
            </View>
          }
          {rankData.length == 0 && <View className="emptyContent">
            <Image src={OSS_BASE_PATH_PREFIX + '/empty.png'} className="emptyIcon" />
            <View className="emptyExtraTitle">大批玩家正在赶来</View>
          </View>}
        </View>
      </View > : null
    );
  }
}

//create by moon https://github.com/creasy2010/moon
